<style lang="scss" scoped>

</style>

<template>
  <el-table 
    :data="baseinfo" 
    border
    style="width: 100%"
    height="calc(100vh - 120px)"
    :row-class-name="({row:{id}})=>id==database.id?'bg-blue-100':' bg-white'"
  >
    <el-table-column prop="id" label="ID" width="70"  />
    <el-table-column prop="name" width="220" >
      <template #header>
        <el-input
          @change="getData"
          clearable
          v-model="pageInfo.key" placeholder="数据集名称[可过滤]" />
      </template>
    </el-table-column>
    <el-table-column prop="desc" label="简介"  />
    <el-table-column label="上传时间" width="220" :formatter="({createtime})=>dateFormat(createtime)"  />
    <el-table-column fixed="right" prop="is_disable" label="操作" width="190">
      <template #default="{ row,$index }">
        <el-button text bg type="primary" :icon="Pointer" @click="store.commit('SET_DATABASE',cloneDeep(row))" />
        <el-button text bg type="warning" :icon="Edit"    @click="openedit(row,$index)" />
        <el-button text bg type="danger"  :icon="Delete"  @click="delItem(row,$index)"  />
      </template>
    </el-table-column>
  </el-table>
  <div class=" mt-4 flex items-center overflow-hidden justify-between">
    <el-pagination
      v-model:currentPage="pageInfo.page"
      v-model:page-size="pageInfo.size"
      :page-sizes="[5,15,20,50]"
      background
      :layout="`total, sizes${pageInfo.total>pageInfo.size?', prev, pager, next, jumper':''} `"
      :total="pageInfo.total"
      @size-change="getData"
      @current-change="getData"
    />
    <el-button 
      @click="router.push({
        name:'postdata'
      })"
      class=" absolute right-4 "
      color="rgb(124, 58, 237)" >导入新数据</el-button>
  </div>
  
  <el-dialog v-model="editshow" title="编辑数据集信息" width="35rem" draggable>
    <div>
      <p class=" font-bold my-2">数据集名称：</p>
      <el-input v-model="editdata.name" />
      <p class=" font-bold my-2">数据集说明：</p>
      <el-input v-model="editdata.desc" 
        maxlength="300"
        show-word-limit
        :autosize="{ minRows: 4, maxRows: 6 }" 
        type="textarea"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editshow = false">取消</el-button>
        <el-button type="primary" @click="edititem">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup >
import { reactive, toRefs } from '@vue/reactivity'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { baseInfoApi } from 'api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getWarnHtmlStr,dateFormat } from 'utils/funcs'
import { useStore } from 'vuex'
import { Edit,Pointer,Delete, Warning } from '@element-plus/icons-vue'
import { clone, cloneDeep } from 'lodash'
import { useRouter } from 'vue-router'

const data = reactive({
  editshow:false,
  editdata:{},
  baseinfo:[],
  pageInfo:{
    key:'',
    size:15,
    page:1,
    total:0
  }
})

const router = useRouter()
const store = useStore()
const database = computed(()=>(store.getters.database || {}))

const getData = async () => {
  const { total,baseinfo } = await baseInfoApi.get(data.pageInfo)
  Object.assign(data,{baseinfo})
  data.pageInfo.total = total
}

let editindex
const openedit = (item,index) => {
  editindex = index
  const editdata = cloneDeep(item)
  Object.assign(data,{editdata,editshow:true})
}
const edititem = async () => {
  if(JSON.stringify(data.editdata) != JSON.stringify(data.baseinfo[editindex])){
    await baseInfoApi.put(data.editdata)
    data.baseinfo[editindex] = cloneDeep(data.editdata)
  }
  data.editshow = false 
}




const delItem = async ({name,id},index) => {
  await ElMessageBox.prompt(
    `这将删除该数据集，包括其中的数据、以及创建的账号等，确定要执行？
    请输入数据集名称，以确认操作。`,
    '移除警告',
    {
    type:'error',
    inputPattern:{ test:(uinput)=>(uinput == name) },
    inputErrorMessage: `请输入数据集名称（${name}）以确认操作`,
  })
  await baseInfoApi.del(id)
  data.baseinfo.splice(index,1)
  data.pageInfo.total -= 1
}

const { baseinfo,pageInfo,editshow,editdata } = { ...toRefs(data) }

onBeforeMount(()=>{
  getData()
})

</script>